<template>
  <div class="input-container">
    <input
      v-model="insertName"
      type="text"
      placeholder="请输入城市名称"
      @input="handleSearch"
    />
    <div v-if="isShow" class="search-info" @click="searchWeather">{{ searchCity }}</div>
    <div v-if="isF" class="search-info">似乎没有找到你查找的城市</div>
  </div>
</template>

<script>
import { requestWeatherByCode, requestWeatherByName } from "@/api/request";
export default {
  name: "InputSearch",
  data() {
    return {
      insertName: "",
      adCode: "",
      weathers: [],
      searchCity: "",
      isShow: false,
      isF: false,
    };
  },
  methods: {
    async handleSearch() {
      const result = await requestWeatherByName(this.insertName);
      if (this.insertName== '') {
        return (this.isShow = false,this.isF = false)
      } else if(result.status == 1){
        this.isShow = true,this.isF = false
      }else{
        return (this.isShow = false,this.isF = true)
      }
      this.searchCity = result.geocodes[0].city;
      this.adCode = result.geocodes[0].adcode;
      // console.log(this.searchCity);
      this.$store.commit("setCityName", this.searchCity);
      this.$store.commit("setAdCode", this.adCode);
      // localStorage.setItem(
      //   `${this.$store.state.cityName}`,
      //   JSON.stringify(this.weathers)
      // );
    },
    async searchWeather(){
      const res = await requestWeatherByCode(this.adCode);
      this.weathers = res.forecasts[0].casts;
      this.$router.push('/search')
    }
  },
};
</script>

<style scoped>
.input-container {
  box-sizing: border-box;
}
.input-container input {
  background: transparent;
  border-color: transparent;
  border-bottom: 1px solid #fff;
  width: 100%;
  line-height: 40px;
  margin-bottom: 25px;
  padding-top: 16px;
  font-size: 16px;
  outline: none;
  color: #fff;
}
.input-container input:focus {
  box-shadow: 0px -2px 5px transparent, 0px 2px 5px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid transparent;
  outline: none;
  color: #fff;
}
.input-container input::placeholder {
  color: #999;
}
.search-info{
  padding: 12px 12px;
  margin-bottom: 1rem;
  background-color: rgb(0, 78, 113);
}
</style>